<template>
  <div>
    <el-form ref="form" label-width="120px" label-position="left">
      <el-form-item label="任务标题">
        {{ clickinfo.title }}
      </el-form-item>
      <el-form-item label="任务详情">
        <el-input
          type="textarea"
          disabled
          v-model="clickinfo.content"
          placeholder="请输入详情"
        ></el-input>
      </el-form-item>

      <el-form-item label="附件" v-if="clickinfo.fileurl">
        <a :href="clickinfo.fileurl" style="color: blue">{{
          clickinfo.filename
        }}</a>
      </el-form-item>

      <el-form-item label="当前指派:">
        {{ clickinfo.username }}
      </el-form-item>
    </el-form>

    <div v-if="isfankui">
      <el-divider></el-divider>

      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="反馈详情" prop="context">
          <el-input
            type="textarea"
            v-model="form.context"
            placeholder="请输入详情"
          ></el-input>
        </el-form-item>

        <el-form-item label="附件" prop="url">
          <el-upload
            ref="upload"
            :action="updatepath"
            :headers="headers"
            name="files"
            accept="*"
            :limit="1"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :before-remove="beforeremove"
          >
            <div style="display: flex; margin-top: 10px">
              <el-button size="small" type="primary" :loading="updateing"
                >点击上传</el-button
              >
              <div style="width: 10px"></div>
              <div slot="tip" class="el-upload__tip"></div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="指派给"
          prop="selectuser"
          v-if="userBranchLevel < 3"
        >
          <el-cascader
            :show-all-levels="false"
            v-model="form.selectuser"
            :options="userlist"
            :props="{ expandTrigger: 'hover', label: 'name', value: 'id' }"
          ></el-cascader>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="fankuilist.length > 0">
      <div v-for="item in fankuilist" :key="item.id">
        <el-divider></el-divider>
        <div class="chuliren" v-if="item.createrUsername">
          <div class="title">处理人:{{ item.createrUsername }}</div>
        </div>
        <div class="title">反馈内容:</div>
        <div style="margin-top: 6px">{{ item.content }}</div>
        <div class="title" style="margin-top: 6px" v-if="item.fileurl">
          附件:
        </div>
        <a
          v-if="item.fileurl"
          :href="item.fileurl"
          style="color: blue; margin-top: 6px"
          >{{ item.filename }}</a
        >
        <div class="fktime">
          <div class="title">反馈时间:</div>
          <div>{{ item.createTime }}</div>
        </div>
      </div>
    </div>

    <div class="footview">
      <el-button v-if="isfankui" @click="clickcancle">取 消</el-button>
      <el-button type="primary" @click="clicksure" :loading="tijiaoing"
        >确 定</el-button
      >
    </div>
  </div>
</template>
  
<script>
import { taskfeekbacklist, taskfeekbacksave } from "@/api/task";
import { mapGetters } from "vuex";
import { getOrgTree } from "@/api/user";
import dayjs from "dayjs";

const defaData = {
  id: "",
  title: "",
  context: "",
  filename: "",
  fileurl: "",
  selectuser: null,
  creater: "",
  userBranchLevel: "",
  userId: "",
};

export default {
  components: {},
  props: {
    clickinfo: {
      type: Object,
      default: () => {},
    },
    isfankui: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    clickinfo: {
      handler: function (val, oldVal) {
        this.getfkarr();
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters(["uid", "userBranchLevel", "updatepath", "token"]),
  },
  filters: {},
  data() {
    return {
      headers: {},
      fankuilist: [],
      form: {},
      userlist: [],
      updateing: false,
      tijiaoing: false,
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        context: [{ required: true, message: "请输入详情", trigger: "blur" }],
        selectuser: [
          { required: true, message: "请选择执行人", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.headers = {
      token: this.token,
    };
    this.getfkarr();
    this.form = _.cloneDeep(defaData);
    this.getuserlist();
    console.log(this.form);
  },
  methods: {
    // 获取用户列表
    getuserlist() {
      getOrgTree({}).then((res) => {
        this.userlist = this.threechildren(res.data);
        console.log(this.userlist);
        // x
      });
    },
    threechildren(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length) {
          this.threechildren(data[i].children);
        }
        if (data[i].userList.length) {
          let arr = [...data[i].userList, ...data[i].children];
          data[i].children = arr;
        }
      }
      return data;
    },
    // 反馈详情
    getfkarr() {
      this.form = _.cloneDeep(defaData);
      this.fankuilist = [];
      // 查询反馈详情
      let data = { pageNo: 1, pageSize: 9999, taskId: this.clickinfo.id * 1 };
      let vm = this;
      taskfeekbacklist(data).then((res) => {
        let arr = res.data.records;
        if (arr.length > 0) {
          vm.fankuilist = arr;
          console.log(vm.fankuilist);
        }
      });
    },
    clicksure() {
      if (this.isfankui) {
        this.submitForm("form");
      } else {
        this.$emit("clicksure");
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 去除空数据
          let datestr = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
          this.tijiaoing = true;
          let data = {
            createTime: datestr,
            userBranchLevel: this.userBranchLevel,
            creater: this.uid,
            // userId: this.uid,
            taskId: this.clickinfo.id,
            content: this.form.context,
          };
          if (this.form.fileurl) {
            data["fileurl"] = this.form.fileurl;
            data["filename"] = this.form.filename;
          }
          if (this.form.selectuser) {
            data["userId"] =
              this.form.selectuser[this.form.selectuser.length - 1];
          }else{
            data["userId"] = this.uid;
          }
          this.tijiaoing = true;
          let vm = this;
          taskfeekbacksave(data).then((res) => {
            this.tijiaoing = false;
            if (res.status == 200) {
              vm.$emit("clicksure");
            } else {
              vm.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    clickcancle() {
      this.$emit("clickcancle");
    },
    // 反馈
    handleAvatarSuccess(res, file) {
      let data = res;
      console.log(data);
      if (data.status == 200) {
        let obj = data.data;
        this.form.fileurl = obj.file[0].fileTotalPath;
        console.log(this.form.fileurl);
      } else {
        this.$message.error(data.msg);
      }
      this.updateing = false;
    },
    beforeAvatarUpload(file) {
      if (this.updateing) {
        return false;
      }
      this.form.filename = file.name;
      this.updateing = true;
      return true;
    },
    beforeremove() {
      this.updateing = false;
    },
  },
};
</script>
  
  
<style lang="scss" scoped>
.title {
  font-weight: bold;
}
.fktime {
  margin-top: 8px;
  display: flex;
  align-items: center;
}
.footview {
  text-align: right;
  margin-top: 20px;
}
.chuliren {
  margin-bottom: 10px;
}
</style>
  